<div class="content__title">
    <h1>
        Form Extended
        <small>Native angular elements to extend the form functions</small>
    </h1>
</div>
<div nz-row [nzGutter]="16">
    <div nz-col [nzMd]="24">
        <nz-card>
            <ng-template #title>Form elements</ng-template>
            <ng-template #body>
                <form nz-form>
                    <div nz-form-item nz-row [nzGutter]="8">
                        <div nz-form-label nz-col [nzSm]="4">
                            <label [ngStyle]="{'color': color1}">Color pickers</label>
                        </div>
                        <div nz-form-control nz-col [nzSm]="4">
                            <nz-input [(ngModel)]="color1" name="color1" [(colorPicker)]="color1"></nz-input>
                        </div>
                        <div nz-form-label nz-col [nzSm]="4">
                            <label [ngStyle]="{'color': color2}">Rgba Color</label>
                        </div>
                        <div nz-form-control nz-col [nzSm]="4">
                            <nz-input [(ngModel)]="color2" name="color2"
                                [(colorPicker)]="color2" [cpOutputFormat]="'rgba'"></nz-input>
                        </div>
                    </div>
                    <div nz-form-item nz-row [nzGutter]="8">
                        <div nz-form-label nz-col [nzSm]="4">
                            <label>Ueditor</label>
                        </div>
                        <div nz-form-control nz-col [nzSm]="20">
                            <div style="line-height: initial;">
                                the <a href="https://cipchk.github.io/ngx-ueditor/" target="_blank">demo code</a> has removed.
                            </div>
                        </div>
                    </div>
                </form>
            </ng-template>
        </nz-card>
    </div>
</div>
